iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
JavaScript

可愛又迷人的 Web API系列 第 27

Day27. 使用 JavaScript 操作動畫的 Web Animations API

  • 分享至 

  • xImage
  •  

以往我比較常用 CSS animation 來做動畫,但其實 JavaScript 也有一個 Web Animations API 可以操作 CSS 動畫和 SVG 動畫。比較起來,Web Animations API 提供了更多的控制和動態互動的調整,如果想要做一些互動性強的動畫,也可以參考 Web Animations API 唷。

建立基本的動畫

我覺得 CSS animation 和 Web Animations API 的基本設定差不多,有用過 CSS animation 的朋友應該很好上手。

以下是一個方塊來回移動的範例:

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: gray;
    position: absolute;
  }
</style>
<div id="box"></div>

效果:

https://mukiwu.github.io/web-api-demo/img/27-1.gif

使用 animate() 方法來製作動畫,設定值都跟 CSS animation 很類似,陣列裡的物件是從開始到結束的樣式:

const box = document.getElementById('box');

box.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 2000,
  iterations: Infinity,
  direction: 'alternate'
});

以下是 animate() 方法中可用的選項與介紹:

屬性 說明 值的型態 預設值
duration 動畫的持續時間 (單位:毫秒) 任意正整數 0
iterations 動畫重複播放的次數 Infinity 或任意正整數 1
direction 動畫的播放方向 正常:normal 反向:reverse來回:alternate反向來回:alternate-reverse normal
easing 動畫的速度曲線 lineareaseease-inease-outease-in-out linear
fill 動畫結束後元素的狀態 無變化:none保持終點狀態:forwards保持起始狀態:backwards保持起始和終點狀態:both none
delay 動畫開始前的延遲時間 (單位:毫秒) 任意正整數 0
endDelay 動畫結束後的延遲時間 (單位:毫秒) 任意正整數 0
iterationStart 動畫的起始播放進度 任意 0 到 1 之間的小數值 0
composite 動畫與現有動畫的合成方式 替換:replace疊加:add replace
id 動畫的唯一 id 字串 undefined

依序播放動畫

以往要在 CSS animation 依序播放動畫,需要去設計動畫的延遲時間才能搭配的剛剛好,改用 Web Animations API 的話,使用 onfinish 就可以比較方便的處理這個問題:

const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');

const animation = box1.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 1500,
  fill: 'forwards'
});

animation.onfinish = () => {
  box2.animate([
    { transform: 'translateY(0)' },
    { transform: 'translateY(300px)' }
  ], {
    duration: 1000,
    fill: 'forwards'
  });
};

可以從範例看到,黃色的方塊會等灰色跑完後才開始執行動畫

https://mukiwu.github.io/web-api-demo/img/27-2.gif

Web Animations API 常見的事件與屬性

前面有用到 onfinish,是 Web Animations API 的一個事件,表示動畫播放完後要觸發的事件,除了 onfinish 外,oncancel 也蠻常用的,整理如下:

  • onfinish:當動畫結束時執行某些後續操作,例如觸發另一個動畫或更改元素狀態。
  • oncancel:需要在動畫被取消時執行某些操作,例如重置動畫狀態或清除資源,可以使用這個事件。

Web Animations API 也有自己的方法,以 play 為例,使用的語法為 animation.play(),更多的方法整理如下:

  • play:可以開始播放或恢復播放動畫,如果動畫已經被暫停或停止,用 play() 方法可以重新啟動動畫。
  • pause:暫停播放動畫
  • reverse:可以反轉動畫的播放方向,如果動畫已經結束,會從終點開始反向播放。
  • finish:會立刻將動畫跳到結束狀態,並且觸發 onfinish 事件。
  • cancel:取消播放動畫,會跳回起始狀態,並觸發 oncancel 事件。
  • updatePlaybackRate(rate):可以調整動畫的播放速度,rate 接受一個正整數,1 表示一倍速,2 表示二倍速。

小結

與 CSS animation 相比,Web Animations API 有更多的細節可控制,適合做互動性強的動畫,我們可以按照需求使用不同的動畫處理方式,讓選擇更多元。有任何問題歡迎留言討論。


上一篇
Day26. 使用 IndexedDB API 做一個筆記儲存功能
下一篇
Day28. 使用 Web Animations API 製作打散文字的動畫效果
系列文
可愛又迷人的 Web API31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言